<template>
  <div class="business">
    <h2>商务合作</h2>
    <div class="content">
      <div class="business-intro">
        <p>中空领航致力于与各行业优秀企业建立长期、稳定的合作关系，携手共创智慧交通美好未来。我们秉持"共赢、共创、共享"的理念，通过优势互补、资源共享，为客户提供更全面、更专业的解决方案。</p>
      </div>
      
      <div class="cooperation-areas">
        <h3>合作领域</h3>
        <div class="areas-grid">
          <div class="area-item" v-for="(area, index) in cooperationAreas" :key="index">
            <div class="area-icon">
              <i :class="area.icon"></i>
            </div>
            <div class="area-info">
              <h4>{{ area.title }}</h4>
              <p>{{ area.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="cooperation-process">
        <h3>合作流程</h3>
        <div class="process-steps">
          <div class="step" v-for="(step, index) in cooperationSteps" :key="index">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-info">
              <h4>{{ step.title }}</h4>
              <p>{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="contact-info">
        <h3>合作咨询</h3>
        <div class="contact-methods">
          <div class="contact-method">
            <h4>商务合作</h4>
            <p><i class="el-icon-phone"></i> 400-123-4567</p>
            <p><i class="el-icon-message"></i> business@zhongkong.com</p>
          </div>
          <div class="contact-method">
            <h4>技术支持</h4>
            <p><i class="el-icon-phone"></i> 400-123-8910</p>
            <p><i class="el-icon-message"></i> tech@zhongkong.com</p>
          </div>
          <div class="contact-method">
            <h4>市场合作</h4>
            <p><i class="el-icon-phone"></i> 400-123-5678</p>
            <p><i class="el-icon-message"></i> marketing@zhongkong.com</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Business',
  data() {
    return {
      cooperationAreas: [
        {
          title: '技术研发合作',
          icon: 'el-icon-cpu',
          description: '联合研发交通大脑、数字孪生、AI算法等核心技术，共同推动行业技术创新。'
        },
        {
          title: '项目实施合作',
          icon: 'el-icon-office-building',
          description: '共同承接智慧交通、智慧城市建设项目，优势互补，提供全方位解决方案。'
        },
        {
          title: '产品集成合作',
          icon: 'el-icon-connection',
          description: '整合硬件设备、软件平台等产品资源，打造完整的产业生态链。'
        },
        {
          title: '市场渠道合作',
          icon: 'el-icon-share',
          description: '共享市场渠道和客户资源，扩大品牌影响力，实现合作共赢。'
        },
        {
          title: '投融资合作',
          icon: 'el-icon-money',
          description: '寻求战略投资与融资合作，加速企业发展和业务拓展。'
        },
        {
          title: '国际业务合作',
          icon: 'el-icon-globe',
          description: '开展国际化业务拓展，共同开发海外市场，实现全球化布局。'
        }
      ],
      cooperationSteps: [
        {
          title: '初步接洽',
          description: '通过电话、邮件或官网联系方式与我们取得联系，提出合作意向。'
        },
        {
          title: '需求沟通',
          description: '双方就合作意向进行深入沟通，明确合作需求和目标。'
        },
        {
          title: '方案制定',
          description: '根据沟通结果，制定详细的合作方案和计划。'
        },
        {
          title: '合同签署',
          description: '双方确认合作方案后，签署正式合作协议。'
        },
        {
          title: '项目执行',
          description: '按照合作协议开展具体项目合作。'
        },
        {
          title: '合作评估',
          description: '定期对合作项目进行评估和优化，持续深化合作关系。'
        }
      ]
    };
  }
}
</script>

<style scoped>
.business {
  padding: 20px 0;
}

.business h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.business h2:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #0056b3;
}

.business-intro {
  margin-bottom: 40px;
}

.business-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.cooperation-areas,
.cooperation-process,
.contact-info {
  margin-bottom: 40px;
}

.cooperation-areas h3,
.cooperation-process h3,
.contact-info h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.area-item {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s;
  display: flex;
  align-items: flex-start;
}

.area-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.area-icon {
  width: 50px;
  height: 50px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.area-icon i {
  font-size: 24px;
  color: #0056b3;
}

.area-info {
  flex: 1;
}

.area-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.area-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.step-number {
  width: 36px;
  height: 36px;
  background-color: #0056b3;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  margin-right: 15px;
}

.step-info {
  flex: 1;
}

.step-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.step-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.contact-method {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  text-align: center;
}

.contact-method h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.contact-method p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method p i {
  margin-right: 8px;
  color: #0056b3;
}

@media (max-width: 992px) {
  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-methods {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .areas-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-methods {
    grid-template-columns: 1fr;
  }
}
</style> 